import React from 'react';
import './PetSelection.css';

const PetSelection = ({ onSelectPet }) => {
  const petTypes = [
    { id: 'cat', name: '猫咪', emoji: '🐱', description: '活泼好动，喜欢玩耍' },
    { id: 'dog', name: '狗狗', emoji: '🐶', description: '忠诚友善，需要定期遛弯' },
    { id: 'rabbit', name: '兔子', emoji: '🐰', description: '安静可爱，喜欢吃胡萝卜' },
    { id: 'hamster', name: '仓鼠', emoji: '🐹', description: '好奇活泼，喜欢收集食物' },
  ];

  return (
    <div className="pet-selection">
      <h2 className="selection-title">选择你的宠物</h2>
      <div className="pet-options">
        {petTypes.map(pet => (
          <div 
            key={pet.id} 
            className="pet-option" 
            onClick={() => onSelectPet(pet.id)}
          >
            <div className="pet-emoji">{pet.emoji}</div>
            <div className="pet-info">
              <h3 className="pet-name">{pet.name}</h3>
              <p className="pet-description">{pet.description}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default PetSelection;